<template>
  <basic-dialog
    width="70%"
    title="选择品类/品牌"
    :visible="visible"
    :handleClose="handleClose"
  >
    <div class="select-wrap">
      <SelectCategory ref="scRef"></SelectCategory>
      <SelectBrand ref="sbRef"></SelectBrand>
    </div>
    <div class="show-result-wrap">
      <list-header title="已选结果">
        <el-button
          slot="right"
          type="text"
          size="mini"
          :disabled="hasNoResult"
          @click="handleClearAll"
        >一键清空结果</el-button>
      </list-header>
      <div class="result-wrap">
        <ResultCategory ref="rcRef" :results.sync="categories" />
        <ResultBrand ref="rbRef" :results.sync="brands" />
      </div>
    </div>
    <div slot="ft">
      <el-button @click="handleCancel">取消</el-button>
      <el-button
        type="primary"
        :loading="confirmLoading"
        @click="handleOk"
      >确定</el-button>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SelectCategory from './components/SelectCategory';
import SelectBrand from './components/SelectBrand';
import ListHeader from './components/ListHeader';
import ResultCategory from './components/ResultCategory';
import ResultBrand from './components/ResultBrand';
export default {
  components: {
    BasicDialog,
    SelectCategory,
    SelectBrand,
    ListHeader,
    ResultCategory,
    ResultBrand
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    confirmSubmit: {
      type: Function
    }
  },
  data () {
    return {
      categories: [],
      brands: [],
      confirmLoading: false
    }
  },
  computed: {
    hasNoResult () {
      const result = [...this.categories, ...this.brands]
      return result.length == 0
    }
  },
  methods: {
    // 一键清空结果
    handleClearAll () {
      this.$confirm('确定后将清空所有已选内容，您确认吗？', '清空', {
        type: 'warning',
      }).then(() => {
        this.$refs.rcRef.clearResults()
        this.$refs.rbRef.clearResults()
      }).catch(() => {})
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 取消操作
    handleCancel () {
      this.$refs.scRef.clearResults()
      this.$refs.sbRef.clearResults()
      this.$emit('update:visible', false)
    },
    // 确定选择
    handleOk () {
      const results = this.getMergeCateAndBrandResults()
      if (this.confirmSubmit) {
        this.confirmSubmit({
          results,
          loadingFn: state => { this.confirmLoading = state },
          cancelFn: this.handleCancel
        })
        return
      }
      this.$emit('getResults', results)
      this.handleCancel()
    },
    // 获取品类品牌合并后的结果集
    getMergeCateAndBrandResults () {
      const mergeList = []
      this.categories.forEach(cateInfo => {
        this.brands.forEach(brandInfo => {
          mergeList.push({ ...cateInfo, ...brandInfo })
        })
      })
      return mergeList
    }
  }
}
</script>
<style lang="less" scoped>
.select-wrap, .result-wrap {
  display: flex;
  div {
    &:first-child {
      width: 60%;
      margin-right: 30px;
    }
    &:last-child {
      flex: 1;
    }
  }
}
.show-result-wrap {
  margin: 20px 0 10px 0;
  .separator {
    width: 2px; /* 竖线宽度 */
    background-color: #ccc; /* 竖线颜色 */
    margin: 0 15px 0 -15px; /* 竖线与左右元素的间距 */
    padding: 10px 0;
    align-self: stretch; /* 竖线高度自适应容器高度 */
    content: "";
  }
}
</style>
